<template>
  <div id="main" style="">
    <el-form
      :inline="true"
      :model="searchObj"
      class="demo-form-inline"
      style="padding-top: 30px"
    >
      <el-form-item>
        <el-input
          v-model="searchObj.hosname"
          placeholder="请输入医院名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchObj.hoscode" placeholder="请输入医院代码">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="danger" @click="batchRemove">批量删除</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100% height: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
      @selection-change="hanldeSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" sortable width="80">
      </el-table-column>
      <el-table-column prop="hosname" label="医院名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="hoscode" label="医院编号" sortable width="180">
      </el-table-column>
      <el-table-column prop="apiUrl" label="签名秘钥" sortable width="180">
      </el-table-column>
      <el-table-column prop="contactsName" label="联系人" sortable width="180">
      </el-table-column>
      <el-table-column
        prop="contactsPhone"
        label="联系人手机"
        sortable
        width="180"
      >
      </el-table-column>

      <el-table-column prop="status" label="状态" sortable width="240">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">{{
            scope.row.status === 1 ? "可用" : "不可用"
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="auto" style="font-size: 20px">
        <template slot-scope="scope">
          <el-button type="danger" round @click="removeDataById(scope.row.id)"
            >删除</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            :type="scope.row.status === 1 ? 'warning' : 'success'"
            round
            size="mini"
            @click="lockHospitalSet(scope.row)"
            >{{ scope.row.status === 1 ? "锁定" : "解锁" }}</el-button
          >
          <el-button
            type="danger"
            round
            @click="removeDataById(scope.row.id)"
            size="mini"
            >删除</el-button
          >
            <router-link :to="'/hospSet/edit/'+(scope.row.id)" >
              <el-button
                type="primary"
                round
                size="mini"
                >修改</el-button
              >
            </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="left: 50%">
      <el-pagination
        @size-change="handleSgizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 30px 0"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 引入接口定义的js文件
import hospset from "@/api/hospset";
export default {
  data() {
    return {
      current: 1,
      limit: 5,
      searchObj: {
        hospname: "",
        hospcode: "",
      },
      tableData: [],
      total: 0,
      selectData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    lockHospitalSet(data) {
      this.$confirm(
        "此操作将" +
          (data.status === 1 ? "锁定" : "解锁") +
          "该医院, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          hospset
            .lockHospitalSet(data.id, data.status)
            .then((resp) => {
              this.getList();
              this.$message({
                type: "success",
                message: (data.status === 1 ? "锁定" : "解锁") + "成功!",
              });
            })
            .catch((error) => {
              this.$message({
                type: "info",
                message: "解锁失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    getList() {
      hospset
        .getHospSetList(this.current, this.limit, this.searchObj)
        .then((resp) => {
          this.tableData = resp.data.records;
          this.total = resp.data.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSgizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getList();
    },
    onSubmit() {
      // console.log(val);
      // this.searchObj = val;
      // this.searchObj.hospname.tr
      this.getList();
    },
    removeDataById(id) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          hospset
            .removeDataById(id)
            .then((resp) => {
              this.getList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch((error) => {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    batchRemove() {
      if (this.selectData.length === 0) {
        this.$message({
          type: "info",
          message: "请选中后再操作",
        });
      } else {
        var resData = [];
        for (let index = 0; index < this.selectData.length; index++) {
          resData.push(this.selectData[index].id);
        }
        console.log(resData);
        this.$confirm("此操作将永久删除这些信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            hospset
              .batchRemove(resData)
              .then((resp) => {
                this.getList();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              })
              .catch((error) => {
                this.$message({
                  type: "info",
                  message: error,
                });
              });
          })
          .catch((error) => {
            console.log(error);
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    hanldeSelectionChange(sData) {
      this.selectData = sData;
    },
  },
};
</script>
<style scoped>
</style>